<script setup lang="ts">
  import { useUserinfoStore } from '@/store/module/useUserStore';
  import UserField from '@/components/profile/UserField.vue';
  import { computed, ref } from 'vue';
  import UpdatePasswordForm from '@/components/form/UpdatePasswordForm.vue';
  import UpdateUserinfo from '@/components/form/UpdateUserinfo.vue';
  import { useMobile } from '@/hooks/core/useMobile';
  import { useLocale } from '@/locales/useLocale';

  const userStore = useUserinfoStore();

  const userOptions = computed(() => {
    return [
      {
        name: 'message.sys.userinfo.personName',
        content: userStore.$state.personName,
      },
      {
        name: 'message.sys.userinfo.sex',
        content: userStore.$state.sex,
      },
      {
        name: 'message.sys.login.email',
        content: userStore.$state.email,
      },
      {
        name: 'message.sys.login.mobile',
        content: userStore.$state.tel,
      },
      {
        name: 'message.sys.userinfo.idCard',
        content: userStore.$state.idCard,
      },
      {
        name: 'message.sys.userinfo.address',
        content: userStore.$state.address,
      },
      {
        name: 'message.sys.userinfo.occupation',
        content: userStore.$state.occupation,
      },
      {
        name: 'message.sys.userinfo.clinicId',
        content: String(userStore.$state.clinicId),
      },
    ];
  });
  const showUpdateUserinfo = ref(false);
  const handleUpdateUserinfoButton = () => {
    showUpdateUserinfo.value = true;
  };
  const isMobile = useMobile();
  const { t } = useLocale();
</script>

<template>
  <div class="space-y-6 pt-2 pl-2 lg:pt-5 lg:pl-10">
    <UserField
      v-for="item in userOptions"
      :key="item.name"
      :field-name="t(item.name)"
      :field-content="item.content"
      class="enter-y"
    />
    <div class="flex justify-end sm:px-10 lg:px-20">
      <el-button class="enter-x w-full sm:w-fit" type="info" @click="handleUpdateUserinfoButton">
        {{ t('message.sys.profile.editInformation') }}
      </el-button>
    </div>
    <el-dialog
      v-model="showUpdateUserinfo"
      :title="t('message.sys.profile.editInformation')"
      :width="isMobile ? '90%' : '50%'"
    >
      <UpdateUserinfo />
    </el-dialog>
  </div>
</template>

<style lang="scss"></style>
